<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>智能检索统计系统--项目进度模块</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
	<!--Layui-->
	<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
	<!--extended-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
	<!--公用样式JS-->
	<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/css/autocomplete.css"/>
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
<#--	<script src="echarts.min.js"></script>-->
	<script type="text/javascript" src="${re.contextPath}/plugin/echarts/echarts-4.2.1.min.js" charset="utf-8"></script>
</head>
<style>
	.Right {
		width: 100%;
		overflow-y: scroll;
		left: 16%;
		top: 144px;
	}
	.personnel ul li label {
		display: inline-block;
		width: 12%;
		text-align: right;
	}
	.release .category input, .personnel .category input {
		margin: 10px;
	}
</style>

<body>
<!--头部-->

<!--容器-->
<div class="container clearfix" style="margin-left: 3%;width: 96%;">
	<!--右侧内容-->
	<div class="Right fr mt10">
		<div class="personnel whitebg">
			<ul>
				<li class="clearfix">
					<label class="fl">时间段：</label>
					<div class="ask fl clearfix">
						<input type="text" class="fl" placeholder="选择开始时间" style="width: 128px;" name="gqBeginDate"
							   lay-verify="required"
							   autocomplete="off" id="gqBeginDate" lay-verify="gqBeginDate">
						<span class="fl ml10 mr10">至</span>
						<input type="text" class="fl" placeholder="选择结束时间" style="width: 128px;" name="gqEndDate"
							   lay-verify="required"
							   autocomplete="off" id="gqEndDate" lay-verify="gqEndDate">
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">业务类型：</label>
					<div class="category clearfix  xmlxdiv">
						<#list xmlx as vo>
							<input type="radio" class="fl h15 w25 " name="projectType"
								   value="${vo.badtCode}" >
							<span class="fl mr10">${vo.badtName}</span>
						</#list>
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">项目归属：</label>
					<div class="category clearfix  xmlxdiv">
						<#list xmgs as vo>
							<div style="display: inline-block">
								<input type="checkbox" class="fl h15 w25 doBestInput" name="company"
									   value="${vo.bcId}"
										<#if "${project.mainFzField}"?contains("${vo.bcId}")>
											checked
										</#if>
								>
								<span class="fl mr10">${vo.bcName}</span>
							</div>
						</#list>
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">行业：</label>
					<div class="category clearfix  xmlxdiv">
						<#list hy as vo>
							<div style="display: inline-block">
								<input type="checkbox" class="fl h15 w25 doBestInput" name="industry"
									   value="${vo.badtCode}"
										<#if "${project.mainFzField}"?contains("${vo.badtCode}")>
											checked
										</#if>
								>
								<span class="fl mr10">${vo.badtName}</span>
							</div>
						</#list>
					</div>
				</li>
				<hr/>
				<li>
					<label class="fl">合同签订地点：</label>
					<select name="province" class="ml8 fl" id="province" onchange="provinceChange(this)" style="width:100px !important;">
						<option value="">请选择</option>
						<#list ssdd as vo>
							<option value="${vo.code}"
							>${vo.name}</option>
						</#list>
					</select>
					<select name="city" id="city" class="ml8 fl" onchange="cityChange(this)"
							style="width: 100px !important;margin-left: 10px">
						<option value="">请选择</option>
					</select>
				</li>
				<li class="clearfix">
					<label class="fl">项目个数：</label>
					<select name="projectNum" id="projectNum" class="ml8 fl" style="width: 100px !important;">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="30">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
					</select>
				</li>
				<li class="clearfix" >
					<div class="fl mt30" style="width:100%;text-align: center">
						<button type="button" class="layui-btn layui-btn-normal" id="analyse" onclick="query()" style="width: 120px;">开始分析</button>
						<button type="button" class="layui-btn layui-btn-normal greenbg white"  style="width: 120px;background-color: #00B83F" onclick="derive()">导出Excel</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="project whitebg" style="text-align: center" >
			<div style="width:100%;height:400px;">
				<div id="main" style="width: 100%;height:90%;"></div>
			</div>
		</div>
	</div>
</div>
<!--layui JS-->
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<!--启动JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery.boot.js"></script>
<!--启动JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery.common.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/layui/lay/modules/tableSelect.js"></script>
<#-- 可以多选的下拉框 -->
<script src="${re.contextPath}/plugin/layui/xm-select.js"></script>
<#--Echarts样式-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/echarts/js/shine.js"></script>
<script type="text/javascript">
	var _ycols = ['id', 'projectName'];
	var layer;
	layui.use(['element','layer','laydate'], function () {
		layer = layui.layer;laydate = layui.laydate;
		laydate.render({
			elem: '#gqBeginDate',
		});
		laydate.render({
			elem: '#gqEndDate',
		});
	})


    function xmgs(){

		project(jsondata);
	}

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'),'shine');
	$(function(){
	})
	//开始分析
	function query(){
		var startTime = $('#gqBeginDate').val();
		var endTime = $('#gqEndDate').val();
		var province = $('#province').val();
		var city = $('#city').val();
		var projectNum = $('#projectNum').val();
		//业务类型
		var arry= new Array();
		$('input[name="projectType"]:checked').each(function(index, element) {
			//追加到数组中
			arry.push($(this).val());
		});
		//将数组元素连接起来转化为字符串
		var projectType = arry.join(',');
		if(!projectType){
			layer.msg('请选择业务类型',{icon:2});return false;
		}
		//项目归属
		var companys = new Array();
		$('input[name="company"]:checked').each(function(index, element) {
			companys.push($(this).val());
		});
		var company = companys.join(',');
		//行业
		var industrys = new Array();
		$('input[name="industry"]:checked').each(function(index, element) {
			industrys.push($(this).val());
		});
		var industry = industrys.join(',');
		var jsondata = {
			startTime:startTime,
			endTime:endTime,
			province:province,
			city:city,
			projectType: projectType,
			company:company,
			industry:industry,
			projectNum:projectNum
		};
		layerAjaxGet('/search/analysis/project',jsondata,'',function (d){
			if(d){
				var name=d.name.split(",");
				var num=d.num.split(",");
				zzt(name,num);
			}
		})
	}


	// 柱状图
	function zzt(name,num){
		// 指定图表的配置项和数据
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: name,
					inside:false,

					axisTick: {
						alignWithLabel: true
					},

					axisLabel:{  //展示角度
						interval:0,
						rotate:50,
						formatter: function (name) {   //关键代码
							var res = name
							if (res.length > 8) {
								res = res.substring(0, 7) + '..'
							}
							return res
						}
					},

				}
			],
			yAxis: [
				{
					name:'百分比',
					type: 'value'
				}
			],
			series: [
				{
					name: '进度',
					type: 'bar',
					barWidth: '20%',
					itemStyle:{
						normal:{
							color:'#64C7E7'
						}
					},
					data: num
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}


	function provinceChange(object){
		var code = $(object).find('option:selected').val();
		if (code == "") {
			return;
		}
		layerAjaxGet('/sys/register/getOrganize', {"code": code}, '', function (d) {
			if (d.flag == true) {
				$(object).next().empty().append("<option value=''>选择市</option>");
				for (var i = 0; i < d.data.length; i++) {
					$(object).next().append("<option value='" + d.data[i].code + "'>" + d.data[i].name + "</option>");
				}
			} else {
				layer.msg(d.msg, {icon: 2});
			}
		});


	};

	//导出Excel
	function derive(){
		var province = $('#province').val();
		var city = $('#city').val();
		var projectNum = $('#projectNum').val();
		//业务类型
		var arry= new Array();
		$('input[name="projectType"]:checked').each(function(index, element) {
			//追加到数组中
			arry.push($(this).val());
		});
		//将数组元素连接起来转化为字符串
		var projectType = arry.join(',');
		if(!projectType){
			layer.msg('请先分析',{icon:2});return false;
		}
		//项目归属
		var companys = new Array();
		$('input[name="company"]:checked').each(function(index, element) {
			companys.push($(this).val());
		});
		var company = companys.join(',');
		//行业
		var industrys = new Array();
		$('input[name="industry"]:checked').each(function(index, element) {
			industrys.push($(this).val());
		});
		var industry = industrys.join(',');
		//获取全部数据:
		var url= '/search/analysis/projectPlan?projectNum='+projectNum+"&startTime="+$('#gqBeginDate').val()+"&endTime="+$('#gqEndDate').val()+"&industry="+industry+"&province="+province+"&city="+city+"&projectType="+projectType+"&company="+company;
		location.href = url;
	}
</script>
</body>

</html>
